jQuery(document).ready(function () {

    $.ajax({
        method: "GET",
        url: '/Performance/GetListRequestChart',
        success: function (data) {

            InitRequestChart(data);
        },
        error: function () {
        }
    });
    
    $.ajax({
        method: "GET",
        url: '/Performance/GetListRequestChart',
        data:{ personalId: $("#personalId").val() },
        success: function (data) {
            InitPersonalRequestChart(data);
        },
        error: function () {
        }
    });
    $.ajax({
        method: "GET",
        url: '/Performance/GetListRequestChartByEmployees',
        data: { personalId: $("#personalId").val() },
        success: function (data) {
            InitRequestChartByEmployees(data);
        },
        error: function () {
        }
    });
    
    InitfrFilterSubmit();
    InitfrFilterPersonalRequestSubmit();
    InitfrmFilterRequestChartByEmployeesSubmit();
});

function InitRequestChart(data) {
var plot = $.plot($("#RequestChart"), data, {
                                series: {
                                    lines: {
                                        show: true,
                                        lineWidth: 2,
                                        fill: true,
                                        fillColor: {
                                            colors: [{
                                                    opacity: 0.05
                                                }, {
                                                    opacity: 0.01
                                                }
                                            ]
                                        }
                                    },
                                    points: {
                                        show: true
                                    },
                                    shadowSize: 2
                                },
                                grid: {
                                    hoverable: true,
                                    clickable: true,
                                    tickColor: "#eee",
                                    borderWidth: 0
                                },
                                colors: ["#35AA47", "#d12610", "#555555"],
                                xaxis: {
                                    ticks: 11,
                                    tickDecimals: 0,
                                    min:1,
                                },
                                yaxis: {
                                    ticks: 11,
                                    tickDecimals: 0,
                                    min: 0,
                                }
                            });


                        function showTooltip(x, y, contents) {
                            
                            $('<div id="tooltip">' + contents + '</div>').css({
                                position: 'absolute',
                                display: 'none',
                                top: y + 5,
                                left: x + 15,
                                border: '1px solid #333',
                                padding: '4px',
                                color: '#fff',
                                'border-radius': '3px',
                                'background-color': '#333',
                                opacity: 0.80
                            }).appendTo("body").fadeIn(200);
                        }

                        var previousPoint = null;
                        $("#RequestChart").bind("plothover", function(event, pos, item) {
                            $("#x").text(pos.x.toFixed(2));
                            $("#y").text(pos.y.toFixed(2));
                            if (item) {
                                if (previousPoint != item.dataIndex) {
                                    previousPoint = item.dataIndex;

                                    $("#tooltip").remove();
                                    var x = item.datapoint[0].toFixed(),
                                        y = item.datapoint[1].toFixed();

                                    showTooltip(item.pageX, item.pageY, "Have " + y + ' accepted request at ' + data[0].data[x][2]);
                                }
                            } else {
                                $("#tooltip").remove();
                                previousPoint = null;
                            }
                        });
                        
                        $('#RequestChart .flot-x-axis .flot-tick-label').each(function () {
                            $(this).html(data[0].data[$(this).text()][2]);
                            $(this).css("overflow", "auto");
                        });
}
function InitfrFilterSubmit() {
    $('#frmFilterRequestChart').submit(function () {
        App.blockUI($("#portlet-RequestChart"), false);
        $("#RequestChart").html('');
        $.ajax({
            method: "GET",
            url: '/Performance/GetListRequestChart',
            data: $(this).serialize(),
            success: function (data) {
                InitRequestChart(data);
                App.unblockUI($("#portlet-RequestChart"), false);
            },
            error: function() {
                App.unblockUI($("#portlet-RequestChart"), false);
            }
        });
        return false;
    });
}
function InitfrFilterPersonalRequestSubmit()
{
    $('#frmFilterPersonalRequestChart').submit(function () {
        App.blockUI($("#portlet-RequestChart"), false);
        $("#PersonalRequestChart").html('');
        $.ajax({
            method: "GET",
            url: '/Performance/GetListRequestChart',
            data: $(this).serialize(),
            success: function (data) {
                InitPersonalRequestChart(data);
                App.unblockUI($("#portlet-PersonalRequestChart"), false);
            },
            error: function () {
                App.unblockUI($("#portlet-PersonalRequestChart"), false);
            }
        });
        return false;
    });
}
function InitPersonalRequestChart(data) {
    var plot = $.plot($("#PersonalRequestChart"), data, {
        series: {
            lines: {
                show: true,
                lineWidth: 2,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.05
                    }, {
                        opacity: 0.01
                    }
                    ]
                }
            },
            points: {
                show: true
            },
            shadowSize: 2
        },
        grid: {
            hoverable: true,
            clickable: true,
            tickColor: "#eee",
            borderWidth: 0
        },
        colors: ["#37b7f3", "#d12610", "#555555"],
        xaxis: {
            ticks: 11,
            tickDecimals: 0,
            min: 1,
        },
        yaxis: {
            ticks: 11,
            tickDecimals: 0,
            min: 0,
        }
    });


    function showTooltip(x, y, contents) {

        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 15,
            border: '1px solid #333',
            padding: '4px',
            color: '#fff',
            'border-radius': '3px',
            'background-color': '#333',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#PersonalRequestChart").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(),
                    y = item.datapoint[1].toFixed();

                showTooltip(item.pageX, item.pageY, "Have " + y + ' accepted request at ' + data[0].data[x][2]);
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

    $('#PersonalRequestChart .flot-x-axis .flot-tick-label').each(function () {
        $(this).html(data[0].data[$(this).text()][2]);
        $(this).css("overflow","auto");
    });
}

function InitfrmFilterRequestChartByEmployeesSubmit() {
    $('#frmFilterRequestChartByEmployees').submit(function () {
        App.blockUI($("#portlet-RequestChartByEmployees"), false);
        $("#RequestChartByEmployees").html('');
        $.ajax({
            method: "GET",
            url: '/Performance/GetListRequestChartByEmployees',
            data: $(this).serialize(),
            success: function (data) {
                InitRequestChartByEmployees(data);
                App.unblockUI($("#portlet-RequestChartByEmployees"), false);
            },
            error: function () {
                App.unblockUI($("#portlet-RequestChartByEmployees"), false);
            }
        });
        return false;
    });
}

function InitRequestChartByEmployees(data) {
    var plot = $.plot($("#RequestChartByEmployees"), [data.value], {
                            series: {
                                bars: {
                                    show: true,
                                    barWidth: 0.8,
                                    fill: true,
                                    fillColor: {
                                    colors: [{
                                        opacity: 0.3
                                    }, {
                                        opacity: 0.6
                                    }
                                    ], borderWidth: 0,
                                }
                                }
                            },
        grid: {
            hoverable: true,
            clickable: true,
            tickColor: "#eee",
            borderWidth: 1
        },
        colors: ["#37b7f3", "#d12610", "#555555"],
        xaxis: {
            ticks: 11,
            tickDecimals: 0,
            min:0
        },
        yaxis: {
            ticks: 11,
            tickDecimals: 0,
            min: 0
        }
    });


    function showTooltip(x, y, contents) {

        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 15,
            border: '1px solid #333',
            padding: '4px',
            color: '#fff',
            'border-radius': '3px',
            'background-color': '#333',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#RequestChartByEmployees").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(),
                    y = item.datapoint[1].toFixed();

                showTooltip(item.pageX-15, item.pageY-35, data.label[x]+" : "+y +" days");
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

    $('#RequestChartByEmployees .flot-x-axis .flot-tick-label').each(function () {
        $(this).html(data.label[$(this).text()]);
        $(this).css("overflow", "auto");
    });
}